<template>
  <div class="app-container bgwhite">
    <m-header title="活动详情">
    </m-header>
    <div class="activity-detail" v-if="activetyData.poster_id">
      <div class="contents">
        <div class="title">{{activetyData.title}}</div>
        <!-- <div class="time">{{activetyData.end_time}}</div> -->
        <div class="content" v-html="activetyData.content"></div>
      </div>
    </div>
    <div class="no-record" v-if="hideLoading && !activetyData.poster_id">
      <img src="../../../assets/imgs/icon-noattention@2x.png" alt="">
      <div class="desc">暂无优惠活动</div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  data () {
    return {
      activetyData: {
        // content: '<p>撒大声地撒大所大所多</p>',
        // end_time: '2019-03-18',
        // is_end: 0,
        // pic: 'http://img.try255.com/fe86fc4d077b0b340bf79a507082af1f?x-oss-process=image/quality,q_95',
        // poster_id: 5,
        // status: '1',
        // title: '大叔大婶多'
      }
    }
  },
  computed: {
    hideLoading () {
      return this.$vux.loading.isVisible() === false;
    }
  },
  mounted () {
    const query = this.$route.params;
    if (query.id) {
      this.$vux.loading.show();
      this.getPosterDetails(query.id);
    }
  },
  methods: {
    ...mapActions({
      getPosterDetail: 'mine/getPosterDetail'
    }),
    getPosterDetails (id) {
      this.getPosterDetail({ poster_id: id }).then(res => {
        this.$vux.loading.hide();
        if (res) {
          this.activetyData = res;
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .app-container {
    &::-webkit-scrollbar{
      display: none;
    }
  }
  .activity-detail {
    padding: 0.92rem 0.3rem 0.3rem;
    // background: #f7f7f7;
    box-sizing: border-box;
    .contents {
      text-align: center;
      .title {
        margin: 0.3rem auto 0.2rem;
        font-size: 0.3rem;
        color: #333;
      }
      .time {
        margin-bottom: 0.1rem;
        font-size: 0.24rem;
        color: #999;
      }
      .content {
        line-height: 0.5rem;
        font-size: 0.26rem;
        color: #333;
        text-align: left;
        text-indent: 2em;
      }
    }
  }
  .no-record {
    position: fixed;
    width: 100%;
    top: 1.92rem;
    bottom: 0;
    height: 100%;
    text-align: center;
    background: #ffffff;
    img {
      display: block;
      width: 4.15rem;
      height: 3.22rem;
      margin: 0 auto;
      padding-top: 0.8rem;
    }
    .desc {
      margin-top: 0.3rem;
      font-size: 0.22rem;
      color: #919191;
    }
  }
</style>
